<!-- 空组件模版 -->
<template>
  <div class="coursedatBox">
    <div class="title">课程数据</div>
    <div class="coursedata">
      <div class="coursedata-mainitem flex">
        <div>
          <div class="label">基础数据</div>
          <div class="coursedata-item">
            <div class="flex coursedata-item-line">
              <div class="label">题目数：</div>
              <div class="value" style="width: 129px">
                {{ data.topicNum ? data.topicNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
            <div class="flex coursedata-item-line">
              <div class="label">考核数：</div>
              <div class="value" style="width: 129px">
                {{
                  data.examPaperNum
                    ? data.examPaperNum.toLocaleString('en-US')
                    : 0
                }}
              </div>
            </div>
            <div class="flex coursedata-item-line">
              <div class="label">练习数：</div>
              <div class="value" style="width: 129px">
                {{
                  data.practicePaperNum
                    ? data.practicePaperNum.toLocaleString('en-US')
                    : 0
                }}
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="label">学习数据</div>
          <div class="coursedata-item">
            <div class="flex coursedata-item-line">
              <div class="label">点击量：</div>
              <div class="value">
                {{ data.clickNum ? data.clickNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
            <div class="flex coursedata-item-line">
              <div class="label">在学人数：</div>
              <div class="value" style="width: 112px">
                {{
                  data.studyingNum
                    ? data.studyingNum.toLocaleString('en-US')
                    : 0
                }}
              </div>
            </div>
            <div class="flex coursedata-item-line">
              <div class="label">结课人数：</div>
              <div class="value" style="width: 129px">
                {{
                  data.finishNum ? data.finishNum.toLocaleString('en-US') : 0
                }}
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="label">考核数据</div>
          <div class="coursedata-item">
            <div class="flex coursedata-item-line">
              <div class="label">累计考核人次：</div>
              <div class="value">
                {{ data.examNum ? data.examNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
            <div class="flex coursedata-item-line">
              <div class="label">生均考核次数：</div>
              <div class="value">
                {{
                  data.avgExamNum ? data.avgExamNum.toLocaleString('en-US') : 0
                }}
              </div>
            </div>
            <div class="flex coursedata-item-line">
              <div class="label">首考通过率：</div>
              <div class="value">{{ data.firstExamPassingRate }}%</div>
            </div>
          </div>
        </div>
        <div>
          <div class="label"></div>
          <div class="coursedata-item">
            <div class="flex coursedata-item-line">
              <div class="label">重考人次：</div>
              <div class="value">
                {{ data.applyNum ? data.applyNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>

            <div class="flex coursedata-item-line">
              <div class="label">生均重考次数：</div>
              <div class="value">
                {{
                  data.avgApplyNum
                    ? data.avgApplyNum.toLocaleString('en-US')
                    : 0
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title">课程迭代记录</div>
    <el-table :data="tableData" style="width: 100%; margin-top: 15px">
      <el-table-column prop="date" label="提交时间" width="155" align="center">
        <template slot-scope="scope">
          <div>{{ parseTime(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 1" class="status2">待审核</div>
          <div v-if="scope.row.status == 0" class="status0">已通过</div>
          <div v-if="scope.row.status == 2" class="status1">已驳回</div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="字符(个)">
        <template slot-scope="scope">
          <div class="flexColCenter">
            <div>{{ scope.row.characterNum }}</div>
            <img
              v-if="scope.row.characterFlag > 0"
              class="trend"
              src="@/assets/images/studyResults/up.png"
              alt="加载失败"
            />
            <img
              v-if="scope.row.characterFlag < 0"
              class="trend"
              src="@/assets/images/studyResults/down.png"
              alt="加载失败"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="imgNum" label="图片(张)">
        <template slot-scope="scope">
          <div class="flexColCenter">
            <div>{{ scope.row.imgNum }}</div>
            <img
              v-if="scope.row.imgFlag > 0"
              class="trend"
              src="@/assets/images/studyResults/up.png"
              alt="加载失败"
            />
            <img
              v-if="scope.row.imgFlag < 0"
              class="trend"
              src="@/assets/images/studyResults/down.png"
              alt="加载失败"
            />
          </div>
        </template
        >
      </el-table-column>
      <el-table-column prop="videoNum" label="视频(个)">
        <template slot-scope="scope">
          <div class="flexColCenter">
            <div>{{ scope.row.videoNum }}</div>
            <img
              v-if="scope.row.videoFlag > 0"
              class="trend"
              src="@/assets/images/studyResults/up.png"
              alt="加载失败"
            />
            <img
              v-if="scope.row.videoFlag < 0"
              class="trend"
              src="@/assets/images/studyResults/down.png"
              alt="加载失败"
            />
          </div>
        </template
        >
      </el-table-column>
      <el-table-column prop="yzsnum" label="元智书(个)">
        <template slot-scope="scope">
          <div class="flexColCenter">
            <div>{{ scope.row.yzsnum }}</div>
            <img
              v-if="scope.row.yzsflag > 0"
              class="trend"
              src="@/assets/images/studyResults/up.png"
              alt="加载失败"
            />
            <img
              v-if="scope.row.yzsflag < 0"
              class="trend"
              src="@/assets/images/studyResults/down.png"
              alt="加载失败"
            />
          </div>
        </template
        >
      </el-table-column>
      <el-table-column prop="wordNum" label="Word(个)">
        <template slot-scope="scope">
          <div class="flexColCenter">
            <div>{{ scope.row.wordNum }}</div>
            <img
              v-if="scope.row.wordFlag > 0"
              class="trend"
              src="@/assets/images/studyResults/up.png"
              alt="加载失败"
            />
            <img
              v-if="scope.row.wordFlag < 0"
              class="trend"
              src="@/assets/images/studyResults/down.png"
              alt="加载失败"
            />
          </div>
        </template
        >
      </el-table-column>
      <el-table-column prop="pptNum" label="PPT(个)">
        <template slot-scope="scope">
          <div class="flexColCenter">
            <div>{{ scope.row.pptNum }}</div>
            <img
              v-if="scope.row.pptFlag > 0"
              class="trend"
              src="@/assets/images/studyResults/up.png"
              alt="加载失败"
            />
            <img
              v-if="scope.row.pptFlag < 0"
              class="trend"
              src="@/assets/images/studyResults/down.png"
              alt="加载失败"
            />
          </div>
        </template
        >
      </el-table-column>
      <el-table-column prop="pdfNum" label="PDF(个)">
        <template slot-scope="scope">
          <div class="flexColCenter">
            <div>{{ scope.row.pdfNum }}</div>
            <img
              v-if="scope.row.pdfFlag > 0"
              class="trend"
              src="@/assets/images/studyResults/up.png"
              alt="加载失败"
            />
            <img
              v-if="scope.row.pdfFlag < 0"
              class="trend"
              src="@/assets/images/studyResults/down.png"
              alt="加载失败"
            />
          </div>
        </template
        >
      </el-table-column>
      <el-table-column prop="excelNum" label="Excel(个)">
        <template slot-scope="scope">
          <div class="flexColCenter">
            <div>{{ scope.row.excelNum }}</div>
            <img
              v-if="scope.row.excelFlag > 0"
              class="trend"
              src="@/assets/images/studyResults/up.png"
              alt="加载失败"
            />
            <img
              v-if="scope.row.excelFlag < 0"
              class="trend"
              src="@/assets/images/studyResults/down.png"
              alt="加载失败"
            />
          </div>
        </template
        >
      </el-table-column>
      <el-table-column prop="otherNum" width="100" label="其他文档(个)">
        <template slot-scope="scope">
          <div class="flexColCenter">
            <div>{{ scope.row.otherNum }}</div>
            <img
              v-if="scope.row.otherFlag > 0"
              class="trend"
              src="@/assets/images/studyResults/up.png"
              alt="加载失败"
            />
            <img
              v-if="scope.row.otherFlag < 0"
              class="trend"
              src="@/assets/images/studyResults/down.png"
              alt="加载失败"
            />
          </div>
        </template
        >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  courseChangeLog,
  courseStudyDate
} from '@/api/studyResult/studyResult'

export default {
  props: {
    tabindex: [String, Number]
  },
  data() {
    return {
      tableData: [],
      data: {}
    }
  },
  watch: {
    // 监听tabindex 页面初始化就监听
    tabindex: {
      handler(newValue) {
        console.log(newValue)
        if (newValue == '3') {
          console.log('获取课程数据', newValue)
          this.getCourseChangeLog()
        }
      }
    }
  },
  methods: {
    async getCourseChangeLog() {
      let res
      res = await courseChangeLog(this.$route.query.courseId)
      let data = await courseStudyDate(this.$route.query.courseId)
      res.data.map((item) => {
        item.otherNum = item.otherNum ? item.otherNum : 0
        item.yzsnum = item.yzsnum ? item.yzsnum : 0
      })
      this.tableData = res.data
      this.data = data.data
      console.log(this.data)
    }
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
.coursedatBox {
  box-sizing: border-box;
  padding: 0 73px 0 73px;
  overflow-y: auto;
  max-height: calc(100vh - 190px - 20px);

  .trend {
    margin-left: 2px;
    width: 15px;
    height: 8px;
  }

  .status0 {
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    color: rgba(40, 178, 154, 1);
    width: 40px;
    height: 16px;
    border-radius: 20px;
    background: rgba(255, 195, 0, 0.2);
    border: 1px solid rgba(40, 178, 154, 1);
  }

  .status2 {
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    color: rgba(255, 141, 26, 1);
    width: 40px;
    height: 16px;
    border-radius: 20px;
    background: rgba(255, 195, 0, 0.2);
    border: 1px solid rgba(255, 141, 26, 1);
  }

  .status1 {
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    color: rgba(212, 48, 48, 1);
    width: 40px;
    height: 16px;
    border-radius: 20px;
    background: rgba(212, 48, 48, 0.2);
    border: 1px solid rgba(212, 48, 48, 1);
  }

  .title {
    margin-top: 37px;
    font-size: 18px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
  }

  .coursedata {
    .coursedata-mainitem {
      margin-top: 12px;

      font-size: 14px;
      font-weight: 500;
      color: rgba(40, 178, 139, 1);

      .label {
        height: 19px;
      }
    }

    .coursedata-item {
      font-size: 12px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin-top: 8px;

      .label {
        line-height: 16px;
      }

      .value {
        width: 100px;
        line-height: 16px;
      }

      .coursedata-item-line {
        margin-bottom: 2px;
      }
    }
  }
}
</style>
